import React, {Component, Fragment} from 'react';
import { Row, Col, Divider, Button, Tabs} from 'antd';
import '../style/index.scss'
import { Link } from 'react-router-dom';
import works  from '../image/works.jpg'
import works1  from '../image/works1.jpg'
import works2  from '../image/works2.jpg'
import works3  from '../image/works3.jpg'
import works4  from '../image/works4.jpg'
import works5  from '../image/works5.jpg'
import works6  from '../image/works6.jpg'
import works7  from '../image/works7.jpg'
import works8  from '../image/works8.jpg'
import works9  from '../image/works9.jpg'
import works10  from '../image/works10.jpg'
import works11  from '../image/works11.jpg'

const { TabPane } = Tabs;

class AboutCom extends Component {
    constructor(props){
        super(props)
        this.state={
            title:"MY WORKS",
            divider:"精 选 · 案 例",
            dec:"设计界面，准备工具，学习语言，创建应用，搭建服务。我们给您提供了一套不断更新的知识框架。实践你的想法，做出想要的网站或应用。",
            btnName:"More",
            tabs:{
                tabPosition:"top",
                tabTit:["响应式", "PC端", "移动端"]
            },
            casesMedia0:[
                {
                    imgUrl:works,
                    title:"智慧农场",
                    post:"Web development",
                    link:"http://onefarm.doone.com.cn/search/"
                },
                {
                    imgUrl:works1,
                    title:"易佰店",
                    post:"Web development",
                    link:"http://www.100estore.com/"
                },
                {
                    imgUrl:works2,
                    title:"诚信签",
                    post:"Web development",
                    link:"http://xinren.itrusign.com/#!/login"
                },
                {
                    imgUrl:works3,
                    title:"蒲江大数据",
                    post:"Web development",
                    link:"http://pjnydsjpt.com/"
                }
            ],
            casesMedia1:[
                {
                    imgUrl:works4,
                    title:"大悟茶叶信息网",
                    post:"Web development",
                    link:"http://www.dwchaye.com/"
                },
                {
                    imgUrl:works5,
                    title:"农业信服务平台",
                    post:"Web development",
                    link:"http://114.116.154.42/dist/login.html"
                },
                {
                    imgUrl:works6,
                    title:"打印派",
                    post:"Web development",
                    link:"http://www.dayinpai.com/"
                },
                {
                    imgUrl:works7,
                    title:"土地流转服务平台",
                    post:"Web development",
                    link:"http://27.150.172.131:7019/lands/#/index"
                }
            ],
            casesMedia2:[
                {
                    imgUrl:works8,
                    title:"农业智慧展厅",
                    post:"Web development",
                    link:"http://114.116.154.42/dist"
                },
                {
                    imgUrl:works9,
                    title:"湖北科技金融",
                    post:"Web development",
                    link:"http://www.hbkjjr.org.cn/"
                },
                {
                    imgUrl:works10,
                    title:"农业追溯平台",
                    post:"Web development",
                    link:"http://zs.nw.wuhan.gov.cn/"
                },
                {
                    imgUrl:works11,
                    title:"纵横天下游戏平台",
                    post:"Web development",
                    link:"http://cspet.witvid.com/"
                }
            ],
            casesPc:[],
            casesMobil:[]
        }
    }

    handleCases(list){
        return list.map((item, index)=>{
            return (
                <Col xs={{span:24}} md={{span:6}} key={index}>
                    <div className="box">
                        <img src={item.imgUrl} style={{maxWidth:'100%'}} alt={item.title} />
                        <div className="box-content">
                            <h3 className="title">{item.title}</h3>
                            <span className="post">{item.post}</span>
                            <ul className="icon">
                                <li><Link to="/"><i className="fa fa-search"></i></Link></li>
                                <li><a href={item.link} target="_blank" rel="noopener noreferrer"><i className="fa fa-link"></i></a></li>
                            </ul>
                        </div>
                    </div>
                </Col>
            )
        })
    }

    render(){
        return (
            <Fragment>
                <Row type={'flex'} justify={'center'}>
                    <Col xs={{span:24}} md={{span:16}}>
                        {/* <Row>&nbsp;</Row> */}
                        <Row>
                            <h1 className="tit_about">{this.state.title}</h1>
                        </Row>
                        <Row>
                            <Divider style={{fontSize: 30, fontWeight:"lighter"}}>{this.state.divider}</Divider>
                        </Row>
                        <Row>
                            <h4 className="tit_dec">{this.state.dec}</h4>
                        </Row>
                        <Row>
                            <Tabs tabPosition={this.state.tabs.tabPosition}>
                                <TabPane tab={this.state.tabs.tabTit[0]} key={"0"}>
                                    <Row gutter={[16, 16]}>
                                        {this.handleCases(this.state.casesMedia0)}
                                    </Row>
                                </TabPane>
                                <TabPane tab={this.state.tabs.tabTit[1]} key={"1"}>
                                    <Row gutter={[16, 16]}>
                                        {this.handleCases(this.state.casesMedia1)}
                                    </Row>
                                </TabPane>
                                <TabPane tab={this.state.tabs.tabTit[2]} key={"2"}>
                                    <Row gutter={[16, 16]}>
                                        {this.handleCases(this.state.casesMedia2)}
                                    </Row>
                                </TabPane>
                            </Tabs>
                        </Row>
                        <Row><h1>&nbsp;</h1></Row>
                        <Row type={'flex'} justify={'center'}>
                            <Col xs={{span:24}} md={{span:4}}>
                                <Button type="primary" size={"large"} block><i className="fa fa-plus"></i>&nbsp;&nbsp;&nbsp;&nbsp;{this.state.btnName}</Button>
                            </Col>
                        </Row>
                    </Col>
                </Row>
            </Fragment>
        )
    }
}

export default AboutCom
